<template>
    <view class="pub_page pub_page_bg pub_ecology_tree_two pub_header_padding">
        <pub-head headerName="ecology_tree_two" :headerConfig="headerConfig"></pub-head>
        <div class="pub_page_scroll page_box" v-if="personalCenter != '' && userInfo != ''">
            <div class="user_box">
                <div class="li">
                    <div class="p_1">{{ personalCenter.dayAddFriendNum || 0 }}</div>
                    <div class="p_2">今日添加好友</div>
                </div>
                <div class="user">
                    <div class="border">
                        <pub-image class="headimg" :src="userInfo.avatar" :mode="'aspectFill'"></pub-image>
                    </div>
                    <div class="p_1">{{ userInfo.nickName }}</div>
                </div>
                <div class="li">
                    <div class="p_1">{{ personalCenter.dayThumbNum || 0 }}</div>
                    <div class="p_2">今日点赞</div>
                </div>
            </div>
            <div class="grade_box">
                <div class="p_1">V{{ personalCenter.grade || 0 }}</div>
                <div class="p_2">今日奖励：<span class="num">{{ personalCenter.dayCoinReward || 0 }}</span> 金币</div>
                <div class="pro_div"
                    v-if="personalCenter.nextGradeExperience && personalCenter.nextGradeExperience > 0">
                    <div class="p_3">距离下一级别需{{needExperience}}经验值</div>
                    <div class="pro">
                        <div class="pro_has" :style="{width:proExperience}"></div>
                    </div>
                    <div class="pro_num">{{ userInfo.experience }}/{{ personalCenter.nextGradeExperience }}</div>
                    <div class="p_4">v{{ personalCenter.grade || 0 }}</div>
                    <div class="p_5">v{{ (personalCenter.grade || 0)+1 }}</div>
                </div>
                <div class="jb_num"><span class="num">{{ userInfo.coin || 0 }}</span> 枚</div>
            </div>
            <div class="join_box"></div>
            <div class="rm_box">
                <div class="title">人脉商城
                    <div class="more" @click="$comFun.openWin('/pages/ecology/exchange_log')">购买记录</div>
                </div>
                <div class="lis">
                    <div class="li" v-for="(li,key) in list" :key="key" @click="to_exchange(li)">
                        <div class="p_1">{{ li.title }}</div>
                        <div class="p_2" v-if="li.integralNum>0">每日加1好友，点赞1次</div>
                        <div class="p_2" v-if="!(li.integralNum>0)">每日加一好友</div>
                        <div class="p_2" v-if="!(li.integralNum>0)">点赞1次</div>
                        <div class="p_2">每日奖励：{{ li.dayReward }}金币</div>
                        <div class="p_2">最多奖励：{{ li.totalReward }}</div>
                        <div class="p_2" v-if="li.integralNum>0">兑换消耗：{{ li.integralNum }} CTT</div>
                        <div class="btn">{{li.coinNum==0?'免费领取':`${li.coinNum}金币兑换`}}</div>
                    </div>
                </div>
            </div>

            <div class="exchange_alert_box" v-if="exchangeData != ''">
                <div class="cont">
                    <div class="title">{{ exchangeData.title }}</div>
                    <div class="btn" @click="sure_exchange">确定兑换</div>
                </div>
                <div class="close" @click="exchangeData = ''"></div>
            </div>

            <div class="real_alert_box" v-if="realData.show">
                <div class="cont">
                    <div class="title">身份绑定</div>
                    <div class="lis">
                        <div class="li">
                            <div class="name name_1">姓名</div>
                            <div class="input_box">
                                <input class="input" v-model="realData.name" type="text" placeholder="请输入姓名">
                            </div>
                        </div>
                        <div class="li">
                            <div class="name name_2">身份证</div>
                            <div class="input_box">
                                <input class="input" v-model="realData.cardId" type="text" placeholder="请输入身份证">
                            </div>
                        </div>
                        <div class="li">
                            <div class="name name_3">二级密码</div>
                            <div class="input_box">
                                <input class="input" v-model="realData.password" type="password" maxlength="6" placeholder="请输入密码">
                            </div>
                        </div>
                    </div>
                    <div class="pub_btn" @click="sureReal">确认绑定</div>
                    <div class="msg_box">
                        <div class="p_1"><span class="xing">*</span> 温馨提示：</div>
                        <div class="p_2">请核对个人信息，本信息一旦绑定无法更改，<br>
                            以后会用到二次验证，请谨慎填写</div>
                    </div>
                </div>
                <div class="close" @click="realData.show = false"></div>
            </div>
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            headerConfig: {
                title: '人脉之树',//标题栏内容
                left_type: 3,
            },

            userInfo: '',
            personalCenter: "",

            list: [],

            exchangeData: '',
            realData: {
                show: false,
                name: '',
                cardId: '',
                password: '',
            }
        };
    },
    computed: {
        needExperience() {
            try {
                return this.personalCenter?.nextGradeExperience - this.userInfo?.experience
            } catch (error) {
                return 0
            }
        },
        proExperience() {
            try {
                return `${(this.userInfo?.experience / this.personalCenter?.nextGradeExperience).toFixed(2)}%`
            } catch (error) {
                return '0%'
            }
        }
    },
    onLoad() {
        this.getInfo();
        this.getList();
    },
    methods: {
        async getInfo() {
            if (this.userInfo == '') {
                this.$comFun.openLoading();
            }
            const res = await this.$request.get('user/userInfo', {});
            const res_1 = await this.$request.get('user/getPersonalCenter', {});
            if (this.userInfo == '') {
                this.$comFun.closeLoading();
            }
            // console.log(res);
            if (res.code == 200 && res_1.code == 200) {
                this.personalCenter = res_1.result;
                this.userInfo = res.result;
            }
        },
        async getList() {
            const res = await this.$request.get('resource/getList', {});
            // console.log(res);
            if (res.code == 200) {
                this.list = res.result;
            }
        },
        to_exchange(info) {
            this.exchangeData = {
                id: info.id,
                title: info.coinNum == 0 ? `确定免费兑换${info.title}人脉包` : `兑换${info.title}人脉包需消耗${info.coinNum}金币`
            }
        },
        async sure_exchange() {
            this.$comFun.openLoading();
            const res = await this.$request.get('resource/exchange', {
                id: this.exchangeData.id
            });
            // console.log(res);
            this.$comFun.closeLoading();
            if (res.code == 200) {
                this.exchangeData = '';
                this.$comFun.toast('兑换成功');
                this.getInfo();
            } else if (res.code == 509) {
                this.exchangeData = '';
                this.realData = this.$options.data().realData;
                this.realData.show = true;
            } else {
                this.$comFun.toast(res.message);
            }
        },
        async sureReal() {
            if (this.realData.name == '' || this.realData.cardId == '' || this.realData.password == '') {
                this.$comFun.toast('请将认证信息填写完整');
                return;
            }
            this.$comFun.openLoading();
            const res = await this.$request.post('user/verifyCard', {
                name: this.realData.name,
                cardId: this.realData.cardId,
                password: this.realData.password,
            });
            // console.log(res);
            this.$comFun.closeLoading();
            if (res.code == 200) {
                this.realData = this.$options.data().realData;
                this.$comFun.toast('认证成功');
            } else {
                this.$comFun.toast(res.message);
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/ecology.scss";
</style>
